<template>
  <div class="forth-box">
    <!-- 分析年龄 -->
    <common-echart :pos="a" @getMychart="getMychart1" width="160" height="80"></common-echart>
    <!-- 分析性别 -->
    <common-echart :pos="c" @getMychart="getMychart1" width="160" height="80"></common-echart>
    <!-- 分析年龄 -->
    <common-echart :pos="b" @getMychart="getMychart2" width="160" height="80"></common-echart>
    <!-- 分析性别 -->
    <common-echart :pos="d" @getMychart="getMychart2" width="160" height="80"></common-echart>
  </div>
</template>

<script setup>
  import { reactive, computed, ref, onMounted, nextTick } from 'vue'
  import commonEchart from '@/components/commonEchart.vue'
  const { pos } = defineProps({
    pos: {
      type: String,
      required: true
    }
  })
  let myChart1 = ref({})
  let myChart2 = ref({})
  let myChart3 = ref({})
  let myChart4 = ref({})
  const [a, b, c, d] = [pos+'1', pos+'2', pos+'3', pos+'4']
  // 定义 data
  let data1 = reactive({
    myColor: ['#2975d4', '#23a3b1','#7272f8'],
    dataList1: [11223, 5180, 863],
    dataTitle: ['青年', '中年','老年'],
    dataSeries: [],
  })
  // 处理第3张图表 这张图表与图表1共用一个交互
  let data3 = reactive({
    myColor: ['#41c7ff', '#de85f3'],
    dataList1: [5180, 12086],
    dataTitle: ['男性', '女性'],
    dataSeries: []
  })
    // 1.1 从接口获取数据
  const getData1 = async() => {
    const {data: data0} = await getPopulationTotal()
    // console.log(data0);
    if(data0.code != 200){
      return 
    }

    // 1.1.1 获取真实数据data0以后，把data0数据push到data中
    data1.dataList1 = []
    data0.data.age.forEach((item, index) => {
      data1.dataList1.push(item)
    })
    // 1.1.2 进一步加工
    dealData(data1)
  }
  // 1.2 二次加工并更新图表
  const dealData = (data,myChart,id) => {
    data.dataSeries = []
    data.dataList1.forEach((item, index) => {
      data.dataSeries.push({
        value: item,
        name: data.dataTitle[index],
      })
    })
    // 更新图表数据
    fresh(data,myChart,id)
  }

  // 定义图表编辑项 option
  let getOption13 = (data) => {
    return {
      // backgroundColor: 'rgba(13,29,70,0.75)',
      title: {
        text: '年龄\n占比',
        x: '39%',
        top: '27%',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 12,
          lineHeight:14,
          fontWeight: '100',
        },
      },
      grid: {
        left: '5%',
        right: '8%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'none',
        // formatter: "{b} : {c} ({d}%)"
      },
      color: data.myColor,
      emphasis: {
        scale: true,
        scaleSize: 5,
        // focus: 'self'
      },
      series: {
        hoverOffset: 4,
        itemGap: 20,
        name: 'Nightingale Chart',
        type: 'pie',
        radius: ['57%', '87%'],
        // roseType: 'area',
        center: ['50%', '50%'],
        data: data.dataSeries,
        label: {
          show: false,
          position: "center"
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          borderRadius: 2,
          // borderWidth: 10, //设置border的宽度有多大
        }
      }
    }
  }

  // 3. 得到mychart实例并暴露出去，处理进一步交互
  const getMychart1 = (shili) => {
    let [myChart_0, id]  = shili
    let p = id.slice(-1)
    let name = 'myChart'+p
    eval(name).value = myChart_0

    // jiaohu(myChart_0)
  }
  const jiaohu = (myChart_0, option) => {
    let index = -1
    let myTime = setInterval(function(){
      myChart_0.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index
      })
      myChart_0.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index + 1
      })
      index ++
      if(index >= option.series.data.length){
        index = -1
      }
    }, 2000)
    return myTime
  }


  let getOption24 = (data) => {
    return {
      grid: {
        top: '6%',
        bottom: '0%',
        width:'80%',
        height: '80%',
        right: 0,
        left: -12,
        containLabel: true
      },
      xAxis: {
        show: false,
      },
      yAxis: [{
        triggerEvent: true,
        show: true,
        inverse: true,
        data: data.dataTitle,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          interval: 0,
          color: '#FFFFFF',
          align: 'left',
          margin: 28,
          formatter: function(value, index) {
            let p;
            p = index
            return '{'+p+'|'+value + '}'
          },
          rich: {
            0: {
              fontSize: 12,
              color: data.myColor[0]
            },
            1: {
              fontSize: 12,
              color: data.myColor[1]
            },
            2: {
              fontSize: 12,
              color: data.myColor[2]
            },
          }
        }
      }],
      tooltip: {
        trigger: 'none',
        // formatter: "{b} : {c} ({d}%)"
      },
      color: data.myColor,
      colorBy: data,
      emphasis: {
        scale: true,
        scaleSize: 5,
        // focus: 'self'
      },
      series: [{
        name: '条',
        type: 'bar',
        z: 12,
        showBackground: true,
        yAxisIndex: 0,
        data: data.dataSeries,
        barWidth: 12,
        itemStyle: {
          normal: {
          label: {
            show: true, //开启显示
            position:"right", //在上方显示
            textStyle: { //数值样式
              color: "#FFFFFF",
              fontSize: 12,
              fontWeight: 500
            },
            padding:[3,0,0,-6],
            formatter: function(params) {
              let p
              p = params.dataIndex
              return '{'+p+'|'+'| ' + '}'+params.value
            },
            rich: {
              0: {
                fontSize: 11,
                fontWeight: 900,
                color: data.myColor[0],
                padding:[-3,0,0,0]
              },
              1: {
                fontSize: 11,
                fontWeight: 900,
                color: data.myColor[1],
                padding:[-3,0,0,0]
              },
              2: {
                fontSize: 11,
                fontWeight: 900,
                color: data.myColor[2],
                padding:[-3,0,0,0]
              },
            }
              },
          }
        },
      }]
    }
  }
  
  // 3. 得到mychart实例并暴露出去，处理进一步交互
  let getMychart2 = ([myChart_0, id]) => {
    let p = id.slice(-1)
    let name = 'myChart'+p
    eval(name).value = myChart_0
    // console.log(myChart2.value,name,eval(name).value)
  }

  // setOption 这里不需要修改 option配置的type
  let fresh = (data,myChart,id) => {
    nextTick(() => {
      // 处理好data后，拿去生成option
      // option = getOption(data)
      // myChart.value.setOption(option)
      if(id==1 || id==3){
        let option = getOption13(data)
        if(id==1){
          option.title.text = '性别\n占比'
        }
        myChart.value.setOption(option)
        jiaohu(myChart.value,option)
      }else{
        let option = getOption24(data)
        myChart.value.setOption(option)
        // option2 = getOption24(data1)
        // option4 = getOption24(data3)
      }
      
    })
  }

  onMounted(()=> {
    // 1. 若接入了数据，运行
    // getData()

    // 2. 若没有接入数据，运行
    dealData(data1,myChart1,1)
    dealData(data1,myChart2,2)
    dealData(data3,myChart3,3)
    dealData(data3,myChart4,4)// 处理第4张图表 data4==data3

  })
</script>

<style lang="less" scoped>
.forth-box {
  display: flex;
  // flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
}
</style>